<template>
  <div>
    <form @submit.prevent="edit = !edit" >
      <label>姓名：</label>
      <input type="text" v-model="form.username" /><br /><br />

      <label>年龄：</label>
      <input type="number" /><br /><br />

      <label>身高：</label>
      <input type="text" v-model="form.height" />(米)<br /><br />

      <label>体重：</label>
      <input type="number" v-model="form.weight" />(公斤)<br /><br />

      <label>病史：</label>
      <input type="text" /><br /><br />

      <button>诊断</button>
    </form>

    <p v-show="edit">{{ form.username }} 的诊断结果：{{ getMedical() }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      edit: false,
      form: {
        username: '',
        age: '',
        height: 0,
        weight: 0,
      },
    }
  },
  methods: {
    getMedical() {
      const BMI = this.form.weight / (this.form.height * this.form.height)
      if (BMI >= 18.5 && BMI < 24.9) {
        return '正常'
      } else if (BMI >= 25 && BMI < 28) {
        return '超重'
      } else if (BMI >= 28) {
        return '肥胖'
      } else {
        return '消瘦'
      }
    
    },
  },
}
</script>
